{% extends "backEndBase.html" %}

{% block head %}
<link rel="stylesheet" href="../static/css/backEndExam.css">
{% endblock %}

{% block content %}
<div class="container p-3">
    <h2>添加考试</h2>
</div>

<div class="container">

    <form role="form" action="" method="post">
        <hr>
        <h4>基本信息</h4>
        <div class="container w-50 mb-3">
            <div class="form-group">
                <label for="name">考试名称</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="">
            </div>
            <div class="form-group">
                <label for="name">报名时间</label>
                <input type="text" class="form-control" id="signTime" name="signTime" placeholder="">
            </div>
            <div class="form-group">
                <label for="name">考试时间</label>
                <input type="text" class="form-control" id="doExamTime" name="doExamTime"
                       placeholder="">
            </div>

        </div>

        <hr>
        <h4>考题信息</h4>
        <div class="container w-75 mb-3">
            <div class="problem-list" id="problem-list">

            </div>

            <div class="container text-center mt-3">
                <a href="#" class="btn btn-primary" onclick="addP(0)">+单选题</a>
                <a href="#" class="btn btn-primary" onclick="addP(1)">+多选题</a>
                <a href="#" class="btn btn-primary" onclick="addP(2)">+简答题</a>
            </div>


        </div>

        <div class="container mt-5">
            <div class="form-group text-center mt-3">
                <input type="submit" class="btn btn-primary" value="添加">
            </div>
        </div>
    </form>

</div>

<script>
                    function addChoiceTo(problem_num, order, fa) {
                        var choice_input = document.createElement("input");
                        choice_input.name = "problem" + problem_num + "choice" + order;
                        choice_input.id = choice_input.name;

                        var choice_label = document.createElement("label");
                        choice_label.setAttribute("for", choice_input.id);
                        choice_label.innerHTML = order + ".";
                        fa.appendChild(choice_label);
                        fa.appendChild(choice_input);
                    }

                    function addP(type) {
                        var problem_list = document.getElementById("problem-list");
                        // 得到新加题目的标号
                        var problem_num = problem_list.children.length + 1;

                        console.log(1);

                        var problem_type = "";
                        if (type == 0)
                            problem_type = "singleSelect";
                        else if (type == 1)
                            problem_type = "multiSelect";
                        else
                            problem_type = "text";

                        // 创建题目div
                        var problem_div = document.createElement("div");
                        problem_div.classList.add("problem-div");

                        // 选项div
                        var test_div = document.createElement("div");
                        test_div.classList.add("test-div");

                        var type_input = document.createElement("input");
                        type_input.name = "problem" + problem_num + "type";
                        type_input.value = problem_type;
                        type_input.style = "visibility: hidden";
                        problem_div.appendChild(type_input);
                        problem_div.appendChild(document.createElement("br"));

                        var content_input = document.createElement("input");
                        content_input.name = "problem" + problem_num + "content";
                        content_input.id = "problem" + problem_num + "content";
                        content_input.type = "text";
                        content_input.classList.add("form-control");
                        if (type == 0 || type == 1)
                            content_input.classList.add("mb-3");

                        var content_label = document.createElement("label");
                        content_label.setAttribute("for", content_input.id);
                        content_label.innerHTML = problem_num + ".题干:";
                        problem_div.appendChild(content_label);
                        problem_div.appendChild(content_input);

                        if (type == 0 || type == 1) {
                            addChoiceTo(problem_num, "A", test_div);
                            addChoiceTo(problem_num, "B", test_div);
                            addChoiceTo(problem_num, "C", test_div);
                            addChoiceTo(problem_num, "D", test_div);
                            test_div.appendChild(document.createElement("br"));
                        }

                        problem_div.appendChild(test_div);

                        var ans_input = document.createElement("input");
                        ans_input.name = "problem" + problem_num + "ans";
                        ans_input.id = "problem" + problem_num + "ans";
                        ans_input.type = "text";
                        ans_input.classList.add("form-control");

                        var ans_label = document.createElement("label");
                        ans_label.setAttribute("for", ans_input.id);
                        ans_label.innerHTML = "答案" + ":";
                        if (type == 0 || type == 1)
                            ans_label.classList.add("mt-3");
                        problem_div.appendChild(ans_label);
                        problem_div.appendChild(ans_input);

                        problem_list.appendChild(problem_div);

                    }


</script>
{% endblock %}

</html>